import React, { useEffect, useMemo, useState } from "react";
import request from "../../utils/request";
import { useNavigate, useSearchParams } from "react-router-dom";
import { CellGroup, NavBar, Tabs,Cell } from "react-vant";
import arrow from "../../../public/arrow.jpg";
import './index.scss'
const List = () => {
  const [list, setList] = useState([]);
  //获取路径参数
  const [searchParams] = useSearchParams();
  const start = searchParams.get("start");
  const end = searchParams.get("end");
  const [value,setValue]=useState('')
  const navigate=useNavigate()
  const getListData = async () => {
    //列表请求
    const res = await request.get("/trip/airplane", { params: { start, end } });
    console.log(res.data);
    const { code, data, message } = res.data;
    if (code === 200) {
      //存储
      setList(data.body.fl);
    } else {
      //没有匹配到的提示
      alert(message);
    }
  };

  useEffect(() => {
    getListData();
  }, []);
console.log(value)
  
  //获取本地日期
  const currentDate = new Date();
  //创建出15个日期
  const dateList = new Array(15).fill().map((v, i) => {
    return new Date(
      currentDate.getTime() + 24 * 60 * 60 * 1000 * i
    ).toLocaleDateString();
  });
  console.log(dateList);

  //去往详情页
  const goDetail=(v)=>{
   navigate(`/detail/${v.atp}`,{state:v})
  }
  return (
    <div>
      <NavBar
        title={
          <div>
            <span style={{ marginRight: "10px" }}>{start}</span>
            <img src={arrow} alt="" style={{ width: "20px", height: "20px" }} />
            <span style={{ marginLeft: "10px" }}>{end}</span>
          </div>
        }
      ></NavBar>

      {/* 日期渲染 */}
      <Tabs sticky scrollspy>
        {dateList.map((item, index) => (
          <Tabs.TabPane key={index} title={item} ></Tabs.TabPane>
        ))}
      </Tabs>
      {/* 普通tabs */}
      <Tabs>
        <Tabs.TabPane title="火车"></Tabs.TabPane>
        <Tabs.TabPane title="顺风车">顺风车</Tabs.TabPane>
        <Tabs.TabPane title="中转">中转</Tabs.TabPane>
      </Tabs>

      {/* 列表渲染区 */}
      <div className="list">
        {
            list.map((v,i)=>{
                return (
                 <div className="list-item" key={i} onClick={()=>goDetail(v)}>
             <div className="list-header">
                  <div className="left">
                       <dl style={{marginRight:'10px'}}>
                        <dt>{v.dst}</dt>
                        <dd>{v.dasn}</dd>
                       </dl>
                       
                        <dl>
                        <dt>
                            {v.dt}
                            <p>---------------------&gt;</p>

                        </dt>
                        <dd>{v.amn}-{v.amt}</dd>
                       </dl>
                       <dl style={{marginLeft:'10px'}}>
                        <dt>{v.ast}</dt>
                        <dd>{v.aasn}</dd>
                       </dl>

                       
                  </div>
                  <div className="right">
                     <span style={{color:'red'}}>￥{v.atp}</span>
                  </div>
             </div>
             <div className="bottom">
                <span style={{marginRight:'10px'}}>二等座 有票</span>
                <span style={{marginRight:'10px'}}>一等座 有票</span>
                <span>商务座 2</span>
             </div>
        </div>
                )
            })
        }
       
      </div>
    </div>
  );
};

export default List;
